<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *,
    html {
      margin: 0;
      padding: 0;
    }

    body {
      display: flex;
      height: 100vh;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    #app {
      width: 300px;
      height: 400px;
      border: 1px solid #ccc;
      overflow: auto;
    }
  </style>
</head>

<body>
  <h1>canvas学习</h1>
  <canvas id="app"></canvas>
  <button id="clearWrap">清屏</button>
</body>
<script>

  function f1() {

  }
  console.dir(f1);
  let app = document.getElementById("app");
  let ctx = app.getContext("2d");
  ctx.strokeStyle = "red";
  ctx.lineWidth = 1;
  let x1, x2, y1, y2;
  app.addEventListener("mousedown", (e) => {
    x1 = e.clientX
    y1 = e.clientY
    ctx.beginPath();
    app.addEventListener('mousemove', callback)
  });

  app.addEventListener("mouseup", () => {
    app.removeEventListener('mousemove', callback)
  });

  clearWrap.addEventListener("click", handleClearWrap);
  function handleClearWrap() {
    clear()
  }

  function callback(x2, y2) {
    ctx.lineTo(x2, y2)
    ctx.stroke()
  }

  // 边线色
  // ctx.strokeStyle = "#ff0000"
  // 填充色
  // ctx.fillStyle = "green";
  // 绘制矩形 x,y,w,h
  // ctx.fillRect(20, 20, 30, 50)

  // ctx.fillText("gz", 10, 10)
  // draw(30, 30, 130, 130, "red")
  // draw(50, 50, 110, 150, "green")
  function draw(x1, y1, x2, y2, color) {
    // 绘制路径（曲线）
    ctx.strokeStyle = color
    ctx.beginPath();
    ctx.moveTo(x1, y1)
    ctx.lineTo(x2, y2)
    ctx.stroke()
  }

  function clear() {
    ctx.fillStyle = '#fff'
    ctx.fillRect(0, 0, 300, 400)
    ctx.clearRect(0, 0, 300, 400);
  }
</script>

</html>